import { Input, InputNumber, Switch, CheckboxGroup, Radio, Select, Cascader } from 'ant-design-vue';
import { toRefs, computed, reactive } from 'vue';
import { Icon } from '/@/components/Icon';
import { useFormStore } from '/@/store/modules/workFlow/form';

const formStore = useFormStore();
const Textarea = Input.TextArea;
const InputPassword = Input.Password;
const RadioGroup = Radio.Group;

/**
 * 组件渲染
 * @param item 组件
 * @param form 表单数据
 * @param preview 是否预览
 * @returns
 */
export const renderItem = (item, form, preview?: boolean) => {
  const formState = reactive(form);
  const { __component__, defaultValue } = toRefs<any>(item);
  const { formConf } = toRefs(formStore);
  let flag;
  // 预览状态
  if (preview) {
    flag = __component__.value.disabled;
  } else {
    flag = formConf.value.disabled;
  }
  // 监听输入内容
  const value = computed({
    get: () => {
      if (preview) {
        return formState[item.__config__.name];
      } else {
        return defaultValue.value;
      }
    },
    set: (value) => {
      formState[item.__config__.name] = value;
      defaultValue.value = value;
    },
  });
  let render;
  switch (item.tag) {
    case 'Input':
      render = (
        <Input
          {...__component__.value}
          v-model:value={value.value}
          disabled={flag}
          prefix={__component__.value.prefix && <Icon icon={__component__.value.prefix}></Icon>}
          suffix={__component__.value.suffix && <Icon icon={__component__.value.suffix}></Icon>}
        ></Input>
      );
      break;
    case 'TextArea':
      render = (
        <Textarea {...__component__.value} v-model:value={value.value} disabled={flag}></Textarea>
      );
      break;
    case 'InputPassword':
      render = (
        <InputPassword
          {...__component__.value}
          v-model:value={value.value}
          disabled={flag}
          prefix={__component__.value.prefix && <Icon icon={__component__.value.prefix}></Icon>}
          suffix={__component__.value.suffix && <Icon icon={__component__.value.suffix}></Icon>}
        ></InputPassword>
      );
      break;
    case 'InputNumber':
      render = (
        <InputNumber
          {...__component__.value}
          v-model:value={value.value}
          disabled={flag}
          prefix={__component__.value.prefix && <Icon icon={__component__.value.prefix}></Icon>}
          suffix={__component__.value.suffix && <Icon icon={__component__.value.suffix}></Icon>}
        ></InputNumber>
      );
      break;
    case 'Switch':
      render = (
        <Switch {...__component__.value} v-model:checked={value.value} disabled={flag}></Switch>
      );
      break;
    case 'CheckBox':
      render = (
        <CheckboxGroup
          {...__component__.value}
          v-model:value={value.value}
          disabled={flag}
        ></CheckboxGroup>
      );
      break;
    case 'Radio':
      render = (
        <RadioGroup
          {...__component__.value}
          v-model:value={value.value}
          disabled={flag}
        ></RadioGroup>
      );
      break;
    case 'Select':
      render = (
        <Select {...__component__.value} v-model:value={value.value} disabled={flag}></Select>
      );
      break;
    case 'Cascader':
      render = (
        <Cascader {...__component__.value} v-model:value={value.value} disabled={flag}></Cascader>
      );
      break;
    default:
      break;
  }
  return render;
};
